<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link type="text/css" rel="stylesheet" href="/static/css/style.css" >
</head>
<script src="static/script/jquery-1.7.2.js"></script>
<script>
	$(function(){
		$("#emptyCart").click(function(){
			//如果点确定 return true，  
             return confirm("确定要清空购物车吗？");
		});
		//给 删除 购物项的 超链接 绑定点击事件
		$(".deleteCartItem").click(function(){
		     return  confirm("你确定要删除【"+$(this).attr("id")+"】吗？");
		 });
		 //给修改count数量的  输入框input  绑定change事件
		 $(".updateCartItem").change(function(){
			  //获取购物项的id
              cartItemID = $(this).attr("id");
			  //获取购物项的count
			  bookCount = $(this).val();
			  //由于修改数量 不需要刷新整个页面，不需要发送同步请求，可以通过发送ajax异步请求实现局部刷新的效果
			  location = "/updateCartItem?cartItemID="+cartItemID+"&count="+bookCount;
			//   var url = "/updateCartItem";
			//   var params = {"cartItemID":cartItemID,"count":bookCount};
			//   //发送Ajax 异步请求
			//   $.post(url,params,function(res){
            //      $("#totalCount").text(res.TotalCount);
			//   });
		 });
	});
</script>
<body>
	
	<div id="header">
			<img class="logo_img" alt="" src="/static/img/logo.gif" >
			<span class="wel_word">购物车</span>
			
			{{if .Cart.UserID}}
			<div>
				<span>欢迎<span class="um_span">{{.Cart.UserName}}</span>光临尚硅谷书城</span>
				<a href="/logout">注销</a> &nbsp;&nbsp;
				<a href="/getMyOrder">我的订单</a>
				<a href="/index">返回</a>
			</div>
			{{else}}
		        <div>
		     	<a href="/login">登录</a> | 	
				 <a href="/toCarts">购物车</a>
				 <a href="/index">返回</a>
				</div>
			{{end}}
	</div>
	
	<div id="main">
	    {{if .Cart.CartItems}}
		<table>
			<tr>
				<td>商品名称</td>
				<td>数量</td>
				<td>单价</td>
				<td>金额</td>
				<td>操作</td>
			</tr>
			{{range .Cart.CartItems}}		
			<tr>
				<td>{{.Book.Title}}</td>
				<td><input type="text" id="{{.CartItemID}}" class="updateCartItem" value="{{.Count}}" style="text-align:center; width: 50px;"></td>
				<td>{{.Book.Price}}</td> 
				<td>{{.Amount}}</td>
				<td><a id="{{.Book.Title}}" class="deleteCartItem" href="/deleteCartItem?cartItemID={{.CartItemID}}">删除</a></td>
			</tr>	
			{{end}}		
		</table>
		

		<div class="cart_info">
			<span class="cart_span">购物车中共有<span class="b_count">{{.Cart.TotalCount}}</span>件商品</span>
			<span class="cart_span">总金额<span class="b_price">{{.Cart.TotalAmount}}</span>元</span>
			<span class="cart_span"><a href="/index">继续购物</a> </span>
			<span class="cart_span"><a href="/deleteCart?cartID={{.Cart.CartID}}" id="emptyCart" >清空购物车</a>
			<span class="cart_span"><a href="/toPay">去结账</a></span>
		</div>
		{{else}}
		<br/><br/><br/><br/><br/>
		<h1 style="text-align: center">空空如也，<a style="color: red" href="/index">快去加购</a></span>
		{{end}}
	
	</div>
	
	<div id="bottom">
		<span>
			尚硅谷书城.Copyright &copy;2015
		</span>
	</div>
</body>
</html>